import React, { useState } from 'react'
import { Upload, message, Button, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
export default function TextPage() {
    // 声明状态保存上传后的图片base64位编码url
    const [imgUrl, setImgUrl] = useState('')
     //设置上传文件类型白名单
    const imgWhiteType = ['image/jpeg', 'image/jpg', 'image/png']
    //声明状态保存上传数据fileList 用于驱动视图
    const [fileList, setFileList] = useState([])
    const props = {
        //文件上传的类型
        name: 'image',
        //显示默认支持的文件上传
        accept:'.jpeg,.png,.jpg',
        //上传文件的接口地址
        action: `${baseURL}/v1_0/upload`,
        //添加token
        headers: {
          authorization:`Bearer${getToken()}`,
        },
        onChange(info) {
         //每次上传组件发生改变保存info.fileList  并把它传给组件,传给组件是为了之后编辑功能图片回显
         setFileList(info.fileList)

        //上传成功失败判定并提示用户
          if (info.file.status === 'done') {
            message.success('文件上传成功');
          } else if (info.file.status === 'error') {
            message.error('文件上传失败');
          }
        },

        // 上传成功后回调函数,点击预览触发事件,接收上传图片的数据
        onPreview(file){
           console.log('file  ----->  ', file);
        //    保存file中base64位编码的url,根据url显示预览图片
           setImgUrl(file.thumbUrl)
        },


        //上传前的回调函数,返回file和fileList,file.type会有上传文件类型标注
        beforeUpload(file){
            // 判定返回的file.type文件类型不包含在上传文件白名单上返回false
            if(!imgWhiteType.includes(file.type)){
                // 提示用户
               message.warning('只能上传图片类型文件')
                //停止上传动作,并不让其显示在页面
               return Upload.LIST_IGNORE
            }
         } 
      };
  return (
      <>
    {/*  listType="picture-card"     antd上传组件自带api,代表上传成功图片回显  */}
    <Upload {...props} listType="picture-card" fileList={fileList}>
        {   
        // 判定小于3时显示,大于等于3隐藏组件
            fileList.length < 3 && <Button icon={<UploadOutlined />}></Button>
        } 
    </Upload>
    {/* visible={!!imgUrl}   控制显示   !! 代表强制转换布尔类型  onCancel   antd模态框自带api   点击X触发    footer={null}代表不需要底部确认取消按钮  */}
    <Modal title="图片预览" visible={!!imgUrl} onCancel={()=>setImgUrl('')} footer={null} centered>
       <img width={400} style={{marginLeft:35}} src={imgUrl} alt="" />
    </Modal>
    </>
  )
}
